<template lang="html">
  <div class="searchnav">
    <router-link tag="div" class="box" to="/index"></router-link>
    <div class="center">
      <input class="input" type="text" name="" value="" placeholder="搜索" ref='input'>
      <i class="i1 search1"></i>
      <i class="i2 search2" @click='clearHandle'></i>
    </div>
    <router-link tag="div" to="/classify" class="classify">
      分类
    </router-link>
  </div>
</template>

<script>

export default {
  name:"SearchNav",
  methods:{
    clearHandle(event){
      this.$refs.input.value=''
    }
  }
}
</script>

<style lang="css" scoped>

.searchnav{
  display: flex;
  width: 100%;
  height: 0.9rem;
  text-align: center;
  background: #7CD39C;
  font-size: 0.16rem;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  overflow: hidden;
}
.classify, .box{
  float: left;
  width: 1.2rem;
  line-height: 0.9rem;
  color: #fff;
}
.box {
  background: url(../../src/assets/icon/logo_GL.png) no-repeat center;
  background-size: 0.75rem;
}
.center{
  flex: 1;
  position: relative;
}
.input{
  width: 96%;
  height: 0.66rem;
  border-radius: 20px;
  border: none;
  background: rgba(255,255,255,0.4);
  margin: 0.12rem 0;
  padding: 0 0 0 0.65rem;
  color: #fff;
  box-sizing: border-box;
}
.search1{
  width: 0.25rem;
  height: 0.66rem;
  background: url(../../src/assets/img/search.png) no-repeat center;
  background-size: 0.25rem;
  position: absolute;
  left: 0.37rem;
  top: 0.12rem;
}
.search2{
  width: 0.3rem;
  height: 0.66rem;
  background: url(../../src/assets/icon/closing.png) no-repeat center;
  background-size: 0.3rem;
  position: absolute;
  right: 0.3rem;
  top: 0.12rem;
}

</style>
